<template>
  <div class="container">
    <div class="title">
      {{ this.type == 0 ? "绑定银行卡" : "修改银行卡" }}
    </div>
    <div class="content">
      <van-form validate-first @submit="onSubmit">
        <div class="conTitle">收款人：</div>
        <van-field
          v-model="data.username"
          name="username"
          :border="false"
          placeholder="请输入收款人姓名"
          :rules="[{ required: true, message: '请输入正确姓名' }]"
        />

        <div class="conTitle">身份证号：</div>
        <van-field
          v-model="data.id_card"
          name="id_card"
          :border="false"
          placeholder="请输入身份证号"
          :rules="[{ validator, message: '请输入正确身份证号' }]"
        />

        <div class="conTitle">银行卡号：</div>
        <van-field
          v-model="data.banknum"
          name="banknum"
          :border="false"
          placeholder="请输入银行卡号"
          :rules="[{ pattern, message: '请输入正确银行卡号' }]"
        />

        <div class="conTitle">开户银行：</div>
        <van-field
          v-model="data.bankname"
          name="bankname"
          :border="false"
          placeholder="请输入开户银行"
          :rules="[{ required: true, message: '请输入正确开户银行' }]"
        />

        <div class="conTitle">支行：</div>
        <van-field
          v-model="data.bankzhihang"
          name="bankzhihang"
          :border="false"
          placeholder="请输入支行"
          :rules="[{ required: true, message: '请输入正确支行' }]"
        />

        <div class="conTitle">手机号：</div>
        <van-field
          v-model="data.mobile"
          name="mobile"
          :border="false"
          placeholder="请输入手机号"
          :rules="[{ validator, message: '请输入正确手机号' }]"
        />

        <div class="conTitle">微信收款二维码上传：</div>
        <!-- <van-field name="uploader" label="">
          <template #input> -->
            <van-uploader :after-read="afterRead" max-count="1" style="margin: 10px 0 0 20px" v-model="fileList" />
          <!-- </template>
        </van-field> -->

        <div style="margin: 16px">
          <van-button
            style="letter-spacing: 2px; color: #fff; font-size: 1.2em"
            color="#3ACE8A"
            round
            block
            type="info"
            native-type="submit"
            >{{ this.type == 0 ? "提交绑定" : "提交修改" }}</van-button
          >
        </div>
      </van-form>
    </div>
    <div class="text">
      <div>为确保能一次性通过审核，请按如下几点上传:</div>
      <div>1，所有收款方式的实名信息必须和要提交实名认证的实名一致。</div>
      <div>2，一定要认真填写银行卡收款信息。</div>
      <div>
        ***请认真填写并上传收款方式，一旦通过审核，不得再修改和添加，银行卡收款方式不允许关闭***
      </div>
    </div>
  </div>
</template>

<script>
import { addCard, modifyCard, upLoad } from "../../api/api";
export default {
  name: "addCard",
  data() {
    return {
      data: {},
      type: 0,
      pattern: /^([1-9]{1})(\d{15}|\d{18})$/,
      fileList: [],
      fullurl: '',
    };
  },
  methods: {
    afterRead(file) {
      this.fileList = []
      this.fileList.push(file);
      this.pamShow = false;
      this.payShowTwo = true;
      this.imageUrl = file.content;
      console.log(file.file);
      let param = new FormData();
      param.append("file", file.file);
      upLoad(param).then((res) => {
        console.log("上传图片接口---", res);
        this.fullurl = res.data.url;
      });
    },
    validator(val) {
      return /(^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$)|(^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/.test(
        val
      );
    },
    validator2(val) {
      return /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
        val
      );
    },
    onSubmit(errorInfo) {
      if(this.fileList.length == 0) return this.$toast.fail('请上传支付码')
      errorInfo.qrcode_url = this.fullurl
      if (this.type == 0) {
        this.addCard(errorInfo);
      } else {
        this.changeCard(errorInfo);
      }
    },
    addCard(errorInfo) {
      errorInfo.user_id = localStorage.getItem("userId");
      addCard(errorInfo).then((res) => {
        this.$toast.success('您已添加银行卡')
        console.log("添加银行卡---", res);
        setTimeout(() => {
          this.$router.go(-1);
        }, 1500);
      });
    },
    changeCard(errorInfo) {
      errorInfo.bank_id = this.data.id
      errorInfo.user_id = localStorage.getItem("userId");
      modifyCard(errorInfo).then((res) => {
        this.$toast.success('修改成功')
        console.log("修改银行卡---", res);
        setTimeout(() => {
          this.$router.go(-1);
        }, 1500);
      });
    },
  },
  mounted() {
    if (this.$route.query.data == "null") {
      console.log("传的空");
      this.type = 0;
    } else {
      this.type = 1;
      this.data = JSON.parse(this.$route.query.data);
    }
  },
};
</script>

<style lang="less" scoped>
div {
  margin: 0;
  padding: 0;
  box-sizing: 0;
}
.container {
  .title {
    width: 100%;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 1.2em;
    background-color: #444444;
    color: #fff;
    letter-spacing: 1px;
  }
  .content {
    margin-top: 10px;
    box-sizing: border-box;
    width: 100%;
    padding: 0 4%;
    color: #333333;
    font-size: 1em;

    .conTitle {
      margin-top: 5px;
      margin-bottom: 3px;
    }

    /deep/ .van-field__control {
      margin-top: 5px;
      height: 50px;
      border: 1px solid #e5e5e5;
      border-radius: 10px;
      margin-bottom: 5px;
      padding-left: 20px;
    }

    /deep/ .van-field__error-message {
      padding-left: 20px;
    }
  }
  .text {
    margin-top: 10px;
    width: 92%;
    margin-left: 4%;
    color: #333333;
    font-size: 0.7em;
    line-height: 20px;
    letter-spacing: 1px;

    div {
      margin-top: 10px;
    }
  }
}
/deep/ .van-dialog--round-button {
  color: "#3ACE8A";
  font-size: 1.3em;
}
</style>